<template>
  <view class="header" @click="login()">
    <view  style="display: flex;align-items: center;gap: 30rpx">

    <view style="width: 120rpx;height: 120rpx;background-color: white;display: flex;align-items: center;justify-content: center;border-radius: 60rpx">
      <image v-if="id" src="/static/tx.jpg" style="width: 120rpx;height: 120rpx;border-radius: 60rpx" mode="aspectFill"></image>
      <image v-else src="/static/user.png" style="width: 120rpx;height: 120rpx;border-radius: 60rpx" mode="aspectFill"></image>
    </view>

    <text class="header-title">{{ name }}</text>
    </view>
    <van-icon name="arrow" />
  </view>
  <view class="login-container">

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="navigateTo('imformation')">
        <text class="menu-text">个人信息</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="navigateTo('test')">
        <text class="menu-text">我的记录</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="navigateTo('learningtime')">
        <text class="menu-text">关于我们</text>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="navigateTo('feedback')">
        <text class="menu-text">反馈</text>
        <text class="menu-arrow">></text>
      </view>
    </view>

    <view class="footer-ad">
      <text class="ad-text" @click="out()">退出登录</text>
    </view>
  </view>
</template>

<script setup>
import { onLoad} from '@dcloudio/uni-app'
import * as Api from '/api/papers'
import { ref } from 'vue';
function out() {
  uni.removeStorageSync('userId');
  name.value = "登录/注册"
  id.value = ""
}
function login() {
  if (name.value === "登录/注册"){
    uni.login({
      provider: 'weixin', //使用微信登录
      success:async function (loginRes) {
        console.log(loginRes.code)
        let res = await Api.login({
          code:loginRes.code
        })
        uni.setStorageSync('userId',res.message)
        id.value = uni.getStorageSync('userId').split(" ")[0]
        name.value = uni.getStorageSync('userId').split(" ")[1]
      }
    });
  }

}
let id = ref()
let name = ref("登录/注册")
onLoad( ()=>{
  if (uni.getStorageSync('userId')){
    id.value = uni.getStorageSync('userId').split(" ")[0]
    name.value = uni.getStorageSync('userId').split(" ")[1]
  }
})

// 导航到指定页面
const navigateTo = (page) => {
  switch (page) {
    case 'imformation':
      if (name.value !== "登录/注册"){
        uni.navigateTo({ url: '/pages/imformation/imformation' });
      }
      break;
    case 'test':
      uni.navigateTo({ url: '/pages/test/test' });
      break;
    case 'learningtime':
      uni.navigateTo({ url: '/pages/learningtime/learningtime' });
      break;
    case 'feedback':
      uni.navigateTo({ url: '/pages/feedback/feedback' });
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.login-container {
  padding:30rpx;
  background-color: #F6F8FC;
  height: calc(100vh - 260rpx);
}

.header {
  background-color: #0AD192;
  text-align: center;
  height: 200rpx;
  border-radius: 0 0 0 50rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 30rpx;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
}

.menu-list {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 15px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 16px;
  color: #333;
}

.menu-arrow {
  font-size: 16px;
  color: #999;
}

.footer-ad {
  margin-top: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.ad-text {
  font-size: 16px;
  color: #333;
}
</style>